.tree-wrap {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  overflow: hidden;
  position: absolute;
  cursor: move;
  user-select: none;

  --color-1: #dc3545;
  --color-2: #0d6efd;
  --color-3: #ffc107;
  --color-4: green;
  --color-5: #0dcaf0;
}

.tree-wrap .tree-1 {
  flex: 0 0 100%;
}

.tree-wrap .tree-2 {
  flex: 0 0 50%;
}

.tree-wrap .tree-3 {
  flex: 0 0 33.33%;
}

.tree-label {
  padding: 10px 16px;
  line-height: 1.6;
  font-size: 14px;
  box-shadow: 0 1px 10px rgba(31, 35, 41, 0.08);
  background: var(--node-color);
  color: #fff;
}

.tree-label.color-1 {
  background: var(--color-1);
  color: #fff;
}

.tree-label.color-2 {
  background: var(--color-2);
  color: #fff;
}

.tree-label.color-3 {
  background: var(--color-3);
  color: #fff;
}
.tree-label.color-4 {
  background: var(--color-4);
  color: #fff;
}
.tree-label.color-5 {
  background: var(--color-5);
  color: #fff;
}

/* .tree-label.is-rect {} */
.tree-label.is-rect-with-round {
  border-radius: 20px;
}
.tree-label.is-ellipse {
  border-radius: 50%;
}
.tree-label.is-triangle {
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}
.tree-label.is-circle {
  clip-path: circle(50%);
}

.vertical .org-chart-node-label {
  max-width: 300px;
}
.vertical .org-chart-node.color-1::before,
.vertical .org-chart-node.color-1::after {
  border-left-color: var(--color-1) !important;
  border-right-color: var(--color-1) !important;
}
.vertical .org-chart-node.color-2::before,
.vertical .org-chart-node.color-2::after {
  border-left-color: var(--color-2) !important;
  border-right-color: var(--color-2) !important;
}
.vertical .org-chart-node.color-3::before,
.vertical .org-chart-node.color-3::after {
  border-left-color: var(--color-3) !important;
  border-right-color: var(--color-3) !important;
}
.vertical .org-chart-node.color-4::before,
.vertical .org-chart-node.color-4::after {
  border-left-color: var(--color-4) !important;
  border-right-color: var(--color-4) !important;
}
.vertical .org-chart-node.color-5::before,
.vertical .org-chart-node.color-5::after {
  border-left-color: var(--color-5) !important;
  border-right-color: var(--color-5) !important;
}

.vertical .color-1 > .org-chart-node-children::before {
  border-color: var(--color-1) !important;
} 
.vertical .color-2 > .org-chart-node-children::before {
  border-color: var(--color-2) !important;
} 
.vertical .color-3 > .org-chart-node-children::before {
  border-color: var(--color-3) !important;
} 
.vertical .color-4 > .org-chart-node-children::before {
  border-color: var(--color-4) !important;
} 
.vertical .color-5 > .org-chart-node-children::before {
  border-color: var(--color-5) !important;
} 

.vertical .color-1 > .org-chart-node-children > .org-chart-node {
  --node-color: var(--color-1);
}
.vertical .color-2 > .org-chart-node-children > .org-chart-node {
  --node-color: var(--color-2);
}
.vertical .color-3 > .org-chart-node-children > .org-chart-node {
  --node-color: var(--color-3);
}
.vertical .color-4 > .org-chart-node-children > .org-chart-node {
  --node-color: var(--color-4);
}
.vertical .color-5 > .org-chart-node-children > .org-chart-node {
  --node-color: var(--color-5);
}

.label-divider {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.label-value,
.label-desc {
  font-size: 12px;
  color: #fff;
}

.label-text {
  font-weight: 600;
}

.label-value {
  margin-top: 5px;
}

.color-1 .label-desc,
.color-1 .label-value,
.color-2 .label-desc,
.color-2 .label-value,
.color-3 .label-desc,
.color-3 .label-value,
.color-4 .label-desc,
.color-4 .label-value,
.color-5 .label-desc,
.color-5 .label-value {
  color: #fff;
}
.line-arrow {
  --arrow-width: 7px;
  position: absolute;
  left: 50%;
  bottom: 100%;
  display: block;
  width: 0;
  height: 0;
  border-top: var(--arrow-width) solid var(--parent-node-color, #ccc);
  border-left: var(--arrow-width) solid transparent;
  border-right: var(--arrow-width) solid transparent;
  transform: translateX(-50%);
  z-index: 100;
}
.is-root-label .line-arrow {
  display: none;
}
.color-1.line-arrow {
  border-top-color: var(--color-1);
}
.color-2.line-arrow {
  border-top-color: var(--color-2);
}
.color-3.line-arrow {
  border-top-color: var(--color-3);
}
.color-4.line-arrow {
  border-top-color: var(--color-4);
}
.color-5.line-arrow {
  border-top-color: var(--color-5);
}

.org-chart-node::before,
.org-chart-node::after {
  box-sizing: border-box;
}